<template>
  <a-modal
    :visible="visibleValue"
    :title="title"
    :width="width"
    :footer="null"
    :destroyOnClose="true"
    @cancel="handleCancel"
  >
    <div class="file-preview-container">
      <!-- PDF预览 -->
      <iframe
        v-if="fileType === 'pdf'"
        :src="previewUrl"
        width="100%"
        height="600"
        frameborder="0"
      ></iframe>
      
      <!-- 图片预览 -->
      <div v-else-if="isImage" class="image-preview">
        <img :src="previewUrl" :alt="fileName" style="max-width: 100%;" />
      </div>
      
      <!-- 视频预览 -->
      <div v-else-if="isVideo" class="video-preview">
        <video controls width="100%" :src="previewUrl">
          您的浏览器不支持视频播放
        </video>
      </div>
      
      <!-- 音频预览 -->
      <div v-else-if="isAudio" class="audio-preview">
        <audio controls :src="previewUrl" style="width: 100%;">
          您的浏览器不支持音频播放
        </audio>
      </div>
      
      <!-- Office文档预览 -->
      <div v-else-if="isOffice" class="office-preview">
        <div class="office-preview-header">
          <file-type-icon :fileType="fileTypeIcon" :size="48" />
          <div class="office-preview-info">
            <h3>{{ fileName }}</h3>
            <p v-if="fileSize">文件大小: {{ formatFileSize(fileSize) }}</p>
          </div>
        </div>
        <div class="office-preview-content">
          <p>无法直接预览该Office文档，请下载后查看。</p>
        </div>
      </div>
      
      <!-- 其他文件类型 -->
      <div v-else class="file-preview-fallback">
        <file-type-icon :fileType="fileTypeIcon" :size="64" />
        <h3>{{ fileName }}</h3>
        <p>
          无法预览该文件类型，请下载后查看。
        </p>
      </div>
      
      <!-- 底部操作按钮 -->
      <div class="file-preview-footer">
        <a-button @click="handleCancel">关闭</a-button>
        <a-button type="primary" @click="handleDownload">下载</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import FileTypeIcon from './FileTypeIcon.vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  file: {
    type: Object,
    default: () => ({}),
  }
});

const emit = defineEmits(['update:visible', 'cancel']);

// 计算属性
const visibleValue = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
});

const fileName = computed(() => props.file?.fileName || '未命名文件');
const fileSize = computed(() => props.file?.fileSize || 0);
const fileType = computed(() => {
  if (!props.file?.fileName) return '';
  const fileName = props.file.fileName;
  return fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
});

const title = computed(() => props.file?.fileName || '文件预览');
const width = computed(() => {
  if (fileType.value === 'pdf' || isVideo.value) {
    return '90%';
  }
  return '800px';
});

const isImage = computed(() => 
  ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(fileType.value)
);

const isVideo = computed(() => 
  ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'].includes(fileType.value)
);

const isAudio = computed(() => 
  ['mp3', 'wav', 'ogg', 'flac', 'aac'].includes(fileType.value)
);

const isOffice = computed(() => 
  ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(fileType.value)
);

const fileTypeIcon = computed(() => {
  if (isImage.value) return 'image';
  if (isVideo.value) return 'video';
  if (isAudio.value) return 'audio';
  if (fileType.value === 'pdf') return 'pdf';
  if (['doc', 'docx'].includes(fileType.value)) return 'word';
  if (['xls', 'xlsx'].includes(fileType.value)) return 'excel';
  if (['ppt', 'pptx'].includes(fileType.value)) return 'ppt';
  if (['zip', 'rar', '7z'].includes(fileType.value)) return 'archive';
  if (['txt', 'log', 'md'].includes(fileType.value)) return 'text';
  return 'file';
});

const previewUrl = computed(() => {
  if (!props.file?.id) return '';
  const baseUrl = import.meta.env.VITE_GLOB_API_URL || '';
  return `${baseUrl}/followup/followUp/previewFile?fileId=${props.file.id}`;
});

const downloadUrl = computed(() => {
  if (!props.file?.id) return '';
  const baseUrl = import.meta.env.VITE_GLOB_API_URL || '';
  return `${baseUrl}/followup/followUp/downloadFile?fileId=${props.file.id}`;
});

// 方法
function handleCancel() {
  emit('update:visible', false);
  emit('cancel');
}

function handleDownload() {
  if (downloadUrl.value) {
    const a = document.createElement('a');
    a.href = downloadUrl.value;
    a.download = fileName.value;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
}

function formatFileSize(size: number) {
  if (!size) return '0 B';
  
  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
  let index = 0;
  let fileSize = size;
  
  while (fileSize >= 1024 && index < units.length - 1) {
    fileSize /= 1024;
    index++;
  }
  
  return `${fileSize.toFixed(2)} ${units[index]}`;
}
</script>

<style lang="less" scoped>
.file-preview-container {
  display: flex;
  flex-direction: column;
  min-height: 400px;
  
  .image-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    
    img {
      max-height: 70vh;
      object-fit: contain;
    }
  }
  
  .office-preview {
    display: flex;
    flex-direction: column;
    min-height: 300px;
    
    &-header {
      display: flex;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #f0f0f0;
      
      .office-preview-info {
        margin-left: 16px;
        
        h3 {
          margin-bottom: 4px;
        }
        
        p {
          color: #999;
          margin: 0;
        }
      }
    }
    
    &-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 32px;
      background-color: #f9f9f9;
      flex: 1;
      
      p {
        font-size: 16px;
        color: #666;
      }
    }
  }
  
  .file-preview-fallback {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    padding: 32px;
    
    h3 {
      margin: 16px 0 8px;
    }
    
    p {
      font-size: 16px;
      color: #666;
    }
  }
  
  .file-preview-footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
}
</style> 